
import { DatePicker, Divider, Flex, Form, Input, InputNumber, Select } from '@/components/base';
import { useElementResize, useItemWidth } from '@/tools/hooks';
import { SelectClient } from '@/components/select-client';
import dayjs from 'dayjs';


/** 订单表单 */
export function FormItem(props: {
    readOnly?: boolean
}) {
    const { readOnly = false } = props;
    const { onRef, width } = useElementResize<HTMLDivElement>();
    const { itemWidth, rowQuantity } = useItemWidth(width, 300);
    return (
        <Flex gap={20} wrap ref={onRef} >
            {[
                <Form.Item
                    label='订单编号'
                    name='orderNo'
                    rules={[
                        { required: true },
                        { pattern: /^C[DQ]-[A-Z]{1,6}-[0-9]{8}-[0-9]{3,9}$/, message: '格式错误' }
                    ]}
                >
                    <Input disabled={readOnly} />
                </Form.Item>,
                <Form.Item
                    label='公司'
                    name='company'
                >
                    <Input disabled placeholder='等待分配' />
                </Form.Item>,
                <Form.Item
                    label='客户'
                    name='clientId'
                    rules={[{ required: true }]}
                >
                    <SelectClient disabled={readOnly} />
                </Form.Item>,
                <Form.Item
                    label='项目名称'
                    name='project'
                    rules={[
                        { required: true },
                        { max: 50 },
                    ]}
                >
                    <Input disabled={readOnly} />
                </Form.Item>,
                <Form.Item
                    label='合作模式'
                    name="cooperationMode"
                    rules={[
                        { required: true }
                    ]}
                >
                    <Select
                        disabled={readOnly}
                        options={['内部', '外包', '外派'].map(e => ({ label: e, value: e }))}
                    />
                </Form.Item>,
                <Form.Item
                    label='承接类型'
                    name='undertakingType'
                    rules={[
                        { required: true }
                    ]}
                >
                    <Select
                        disabled={readOnly}
                        options={['手绘角色模型', '手绘场景模型', '次世代角色模型', '次世代场景模型', '3D动作', '图标', '原画', '地编'].map(e => ({ label: e, value: e }))}
                    />
                </Form.Item>,
            ].map((item, index) => {
                return (
                    <div style={{ width: itemWidth - (index % rowQuantity === 0 ? 0 : 20) }}>{item}</div>
                )
            })}
            <Divider style={{ flex: 1, margin: 0 }} />
            {[
                <Form.Item
                    label='商务计划完成时间'
                    name='scheduledCompletionTime'
                    getValueProps={(value) => { return { value: value ? dayjs(value) : undefined } }}
                    normalize={(value) => { return dayjs.isDayjs(value) ? value.format('YYYY-MM-DD') : undefined }}
                    rules={[
                        { required: true },
                        { validator: notPastTime },
                    ]}

                >
                    <DatePicker disabled={readOnly} style={{ width: '100%' }} />
                </Form.Item>,
                <Form.Item
                    label='制作计划完成时间'
                    name='produceCompletionTime'
                    getValueProps={(value) => { return { value: value ? dayjs(value) : undefined } }}
                    normalize={(value) => { return dayjs.isDayjs(value) ? value.format('YYYY-MM-DD') : undefined }}
                    rules={[
                        { required: true },
                        { validator: notPastTime },
                    ]}
                >
                    <DatePicker disabled={readOnly} style={{ width: '100%' }} />
                </Form.Item>,
                <Form.Item
                    label='制作人天'
                    name='personDays'
                    rules={[
                        { required: true },
                        { type: 'number', min: 0 },
                    ]}
                >
                    <InputNumber disabled={readOnly} style={{ width: '100%' }} />
                </Form.Item>,
                <Form.Item
                    label='实际开始时间'
                    name='startTime'
                >
                    <Input disabled />
                </Form.Item>,
                <Form.Item
                    label='实际完成时间'
                    name='completionTime'
                >
                    <Input disabled />
                </Form.Item>,
                <Form.Item
                    label='付款周期（天）'
                    name='paymentCycle'
                    help="开票后应在该时间内回款"
                    rules={[
                        { required: true },
                        { type: 'number', min: 0 },
                    ]}
                >
                    <InputNumber disabled={readOnly} style={{ width: '100%' }} />
                </Form.Item>,
                <Form.Item
                    label='结算周期（天）'
                    help="实际制作完成后应在该时间内开始结算"
                    name='billingCycle'
                    rules={[
                        { required: true },
                        { type: 'number', min: 0 },
                    ]}
                >
                    <InputNumber disabled={readOnly} style={{ width: '100%' }} />
                </Form.Item>,
            ].map((item, index) => {
                return (
                    <div style={{ width: itemWidth - (index % rowQuantity === 0 ? 0 : 20) }}>{item}</div>
                )
            })}
            <Divider style={{ flex: 1, margin: 0 }} />
            {[
                <Form.Item
                    label='单价（元）'
                    name='price'
                    rules={[
                        { required: true },
                        { type: 'number', min: 0 },
                    ]}
                >
                    <InputNumber disabled={readOnly} style={{ width: '100%' }} />
                </Form.Item>,
                <Form.Item
                    label='商务人天'
                    name='businessDay'
                    rules={[
                        { required: true },
                        { type: 'number', min: 0 },
                    ]}
                >
                    <InputNumber disabled={readOnly} style={{ width: '100%' }} />
                </Form.Item>,
                <Form.Item
                    label='总金额（元）'
                    name='amount'
                    rules={[
                        { required: true },
                        { type: 'number', min: 0 },
                    ]}
                >
                    <InputNumber style={{ width: '100%' }} disabled />
                </Form.Item>,
            ].map((item, index) => {
                return (
                    <div style={{ width: itemWidth - (index % rowQuantity === 0 ? 0 : 20) }}>{item}</div>
                )
            })}
            <Divider style={{ flex: 1, margin: 0 }} />
            <div style={{ width: '100%' }} >
                <Form.Item
                    label='订单明细'
                    name='details'
                    rules={[
                        { required: true },
                        { max: 1000 },
                    ]}
                >
                    <Input.TextArea disabled={readOnly} style={{ height: 80 }} count={{ show: true, max: 1000 }} />
                </Form.Item>
            </div>
        </Flex>
    )
}


/** 不能是过去时间，可以是今天 */
function notPastTime(_rule: any, value: any) {
    if (value && value < new Date().setHours(0, 0, 0, 0)) {
        return Promise.reject('不能是过去时间');
    }
    return Promise.resolve();
}


